<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="vue.min.js"></script>
</head>
</head>
<body>
    <div style="text-align: center;">
    <div id="app">
      <p>查询：<input type="text" v-model="select" placeholder="请输入关键字查询"></p>
      <p>I     d  :<input type="text" v-model="userid" placeholder="请输入id">{{useridtip}}</p>
      <p>姓名:<input type="text" v-model="username" placeholder="请输入姓名">{{usernametip}}</p>
      <p>年龄:<input type="text" v-model="userage" placeholder="请输入年龄">{{useragetip}}</p>
      <!-- <p><button v-on:click="save()">保存</button></p> -->
      <p><button v-on:click="add()">添加</button></p>
        <table class="table table-striped table-bordered" >
            <tr>
                <th >编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
            <tr v-for="item,i in newlist">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.age}}</td>
                <td><button v-on:click="del(i)">删除</button></td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                list:[{
                    id:1,
                    name:"王五",
                    age:22
                },{
                    id:2,
                    name:"赵六",
                    age:22
                },{
                    id:3,
                    name:"依依",
                    age:22
                },{
                    id:4,
                    name:"李问",
                    age:22
                },{
                    id:1,
                    name:"阿五",
                    age:22
                }],
                select:"",
                userid:"",
                username:"",
                userage:"",
                useridtip:"",
                usernametip:"",
                useragetip:""
               
            },   
            match:{
                userid:function(val){
                    if (val=="") {
                        this.useridtip="请输入id"                       
                    }else{
                        this.useridtip="ok"
                    }
                },
                username:function(val){
                    if (val=="") {
                        this.usernametip="请输入id"                       
                    }else{
                        this.usernametip="ok"
                    }
                },
                userage:function(val){
                    if (val=="") {
                        this.useragetip="请输入id"                       
                    }else{
                        this.useragetip="ok"
                    }
                }
            },       
            computed: {
                newlist:function(){
                    var _this=this;
                    // filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。
                    return _this.list.filter(function(val){
                        // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
                        // indexOf()如果没有找到匹配的字符串则返回 -1
                        // 根据name查询   return val.name.indexOf(_this.select) !=-1;
                        if(_this.select==""){
                            return val;
                        }else{
                            return val.id==parseInt(_this.select)
                        }
                        
                    });
                }
            },
            methods: {

                //push() 结尾添加
                // save:function(){
                //     this.list.push({
                //         id:this.userid,
                //         name:this.username,
                //         age:this.userage
                //     })
                // }


                // unshift() 头部添加
                add:function(){
                    this.list.unshift({
                        id:this.userid,
                        name:this.username,
                        age:this.userage
                    })
                },
                //splice删除
               del:function(val){
                   if (confirm("确认删除？")) {
                        this.list.splice(val,1)
                   }
                  
               }
                //
            },
        })
    </script>
     </div>
</body>
</html>